<template>
	<view class="wrapper">
		<view class="cu-form-group">
			<view class="title">商品名称</view>
			<input placeholder="请输入商品名称" name="title" v-model="formData.title"></input>
		</view>
		<view class="upimg" style="padding:0 20rpx;background:#fff;box-sizing: border-box;padding-bottom:30rpx;">
			<view class="proimg">
				<view class="left">
					<view class="title" style="width:100%;height:80rpx;font-size:28rpx;font-weight: bold;color:orangered;line-height:80rpx;">商品主图</view>
					<view class="want">
						<view class="addimg">
			
							<view @tap="handleImage()">
								<view v-if="formData.image" class="item">
									<image :src="config.cdnurl+formData.image" mode="aspectFill"
										style="width:150rpx;height:150rpx"></image>
								</view>
								<view v-else class="item">
									<view class="text-lg text-gray text-item">
										<text class="wlIcon-tianjia"></text>
										<view class="margin-top-xs text-sm">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>
			
			
				</view>
			</view>
			
			
			<view class="attrtitle" style="margin-top: 20rpx; font-size=28rpx;font-weight: bold;">商品规格</view>
			
			<view class="attrwrapper" v-for="(item,index) in formData.attr" :key="index">
				<view class="upimg">
					<view @tap="handleImagecolor(index)">
						<view v-if="item.img" class="item">
							<image :src="config.cdnurl + item.img" mode="aspectFill"
								style="width:150rpx;height:150rpx"></image>
						</view>
						<view v-else class="item">
							<view class="text-lg text-gray text-item" style="display:flex;flex-flow:column nowrap;align-items: center;">
								<text class="wlIcon-tianjia"></text>
								<view class="margin-top-xs text-sm">添加图片</view>
							</view>
						</view>
					</view>
				</view>
				<input class="attrname" v-model="item.name" placeholder="请输入规格描述"/>
				<input class="low" v-model="item.store" placeholder="库存"/>
				<input class="low" v-model="item.price" placeholder="价格"/>
				<text @click="addorsub('add')" v-if="index == 0" style="font-size:30rpx;font-weight: bold;display:inline-block;width: 60rpx;height:60rpx;text-align: center;line-height:60rpx;">+</text>
				<text @click="addorsub('sub',index)" v-if="index != 0" style="font-size:30rpx;font-weight: bold; display:inline-block;width: 60rpx;height:60rpx;text-align: center;line-height:60rpx;">-</text>
			</view>	
		
		
			<view class="attrtitle" style="margin-top: 20rpx; font-size=28rpx;font-weight: bold;">宝贝详情</view>
		
			<textarea rows="6"  v-model="formData.desc" style="border:1rpx solid #eee;width:100%;margin-top:20rpx;"></textarea>
		
		</view>

		<button @click="submitpro" type="primary" style="position: fixed;bottom:0;width:100%;background:orange"> 提交</button>
	</view>
</template>



<script>
	import config from '../../common/config/config';
	
	export default {
		data() {
			return {
				config,
				id:0,
				tag:"add",
				spu: [],
				spuItem: [], //[['红','黄','蓝'], ['大','小']]
				sku: [],
				
				formData:{
					title:"",
					image:"",
					desc:"",
					attr:[
						{
							img:"",
							name:"",
							price:"",
							store:""
						},
					]
				}
			}
		},
		
		
		onLoad(options){
			let that = this;
			if(options.edit  && options.edit == 1){
				uni.setNavigationBarTitle({title:"编辑商品"});
				this.tag = "edit";
				let detail = null;
				detail = JSON.parse(options.detail);
				this.id = detail.id
				//如果是修改多规格的商品
				uni.request({
					url:"/wanlshop/shop/getSkuInfo",
					method:"POST",
					data:{id:detail.id},
					success(res){
						
						console.log(res);
						
						let goods = res.data.goods;
						that.spu = ""
						let sku = res.data.sku;
						let spu = res.data.spu;
						let spuattr = [];
						let imageobj = {};
			
					
					
						//设置商品的主图
						that.formData.image = goods.image;
						that.formData.title = goods.title;
						that.formData.desc = goods.description;
					
					
						let attritem = {};
						let itemAttr = spu[0].item.split(",")
		
						let attritemArr = []
						itemAttr.forEach(it=>{
							let findsku = sku.find(item=>item.difference== it);
							
							attritem = {
								name:it,
								img:findsku.img,
								price:findsku.price,
								store:findsku.stock,
							}
							attritemArr.push(attritem)
						})
						that.formData.attr = attritemArr;
					}
				})
				
				
				
				
			}
			
		},
		
		
		methods: {
			handleImage() {
				uni.chooseImage({
					crop: {
						quality: 60
					},
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,  ///api/common/upload
												filePath: image.path,
												name: 'file',
												formData:updata.data.storage == 'local' ? null : updata.data.multipart,
												success: data => {
													if(JSON.parse(data.data).code == 1){
														//this.params.images.push(JSON.parse(data.data).data.url);
														this.formData.image = JSON.parse(data.data).data.url;
													}
												},
												fail: error =>{
													uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
												}
											});
										}
									});
								}
							}
						});
					}
				});
			
			},
			
			
			handleImagecolor(index){
				let that = this;
				uni.chooseImage({
					crop: {
						quality: 60
					},
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,  ///api/common/upload
												filePath: image.path,
												name: 'file',
												formData:updata.data.storage == 'local' ? null : updata.data.multipart,
												success: data => {
													if(JSON.parse(data.data).code == 1){
														//this.params.images.push(JSON.parse(data.data).data.url);
														that.formData.attr[index].img = JSON.parse(data.data).data.url;
													}
												},
												fail: error =>{
													uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
												}
											});
										}
									});
								}
							}
						});
					}
				});
							
			},
			
			submitpro(){
				// if(!this.formData.title){
				// 	uni.showToast({
				// 		title:"商品名称不能为空",
				// 		icon:"none"
				// 	})
				// 	return;
				// }
				
				
				// if(!this.formData.image){
				// 	uni.showToast({
				// 		title:"商品主图不能为空",
				// 		icon:"none"
				// 	})
				// 	return;
				// }
				
				// try{
				// 	this.formData.attr.forEach(item=>{
				// 		if(!item.name || !item.img || !item.price || !item.store){
				// 			throw new Error("error")
				// 		}
				// 	})
				// }catch(e){
				// 	uni.showToast({
				// 		title:"请填写完整的商品信息",
				// 		icon:"none"
				// 	})
				// }

				
				
				this.makeSku();
				this.makeSpuItem();
			
				
				let minprice = this.sku[0][2]
				
				this.sku.forEach(item=>{
					if(item[2]*1 <= minprice*1){
						minprice = item[2]
					}
				})
				
				
				let params = {
					title:this.formData.title,
					image:this.formData.image,
					description:this.formData.desc,
					stock:'porder',
					freight_id:"13",
					spu:"规格",
					spuItem:this.spuItem,
					sku:this.sku,
					price:minprice,
					tag:this.tag
				}
				
				if(this.tag == "edit"){
					params.id = this.id;
				}
				
				
				uni.request({
					url:"/wanlshop/shop/addCommonGoods",
					method:"POST",
					data:params,
					success:(res)=>{
						console.log(res);
						if(res.res.code == 1){
							if(this.id){
								uni.showToast({
									title:"商品修改成功",
									icon:"none"
								})
							}else{
								uni.showToast({
									title:"商品添加成功",
									icon:"none"
								})
							}
							
							setTimeout(()=>{
								uni.navigateBack();
							},1500)
						}else{
							uni.showToast({
								title:"网络故障请重试",
								icon:"none"
							})
						}
					}
				})
				
				
				
				
				
				
			},
			
			
			makeSku(){
				let sku = [];
				this.formData.attr.forEach(item=>{
					let skuitemArr = [];
					skuitemArr.push(item.name);
					skuitemArr.push(item.img);
					skuitemArr.push(item.price);
					skuitemArr.push(item.store)
					sku.push(skuitemArr)
				})
				this.sku = sku;
			},
			
			makeSpuItem(){
				let spuitem = [];
				this.formData.attr.forEach(item=>{
					if(item.name){
						spuitem.push(item.name)
					}
				})
				this.spuItem = [spuitem];
			},
		
			addorsub(tag,index){
				if(tag == 'add'){
					//添加一个选项
					this.formData.attr.push({
							img:"",
							name:"",
							price:"",
							store:""
						},)
					
				}else{
					//减少一个选项
					this.formData.attr.splice(index,1);
				}
			}
		
		}
	}
</script>

<style lang="scss" scoped>
.wrapper{
	padding-bottom:80rpx;
}	
	
	
.proimg {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;

	.left {
		.want {
			.addimg {
				width: 150rpx;
				height: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1rpx solid #aaa;
				border-radius: 10rpx;

				.item {
					.text-item {
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}

	.right {
		padding-left: 50rpx;

		.price {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.mid {
				width: 30rpx;
			}

			::v-deep .uni-easyinput__content {
				width: 120rpx;
			}

		}

		.store {
			margin-top: 10rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			::v-deep .uni-easyinput__content {
				width: 180rpx;
			}
		}
	}


}


.attrwrapper{
	margin-top:30rpx;
	position:relative;
	display:flex;
	justify-content: space-between;
	align-items: center;
	.attrname{
		width:300rpx;
		border:1rpx solid #aaa;
	}
	.low{
		width:100rpx;
		border:1rpx solid #aaa;
	}

	.upimg{
		margin-top:20rpx;
		.item{
			width:150rpx;
			height:150rpx;
			display:flex;
			justify-content: center;
			align-items: center;
			background:#fff;
			border:1rpx solid #aaa;
		}
	}

}
			


</style>
